/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="details">

			<!-- 商品详情 -->
			<swiper class="swiper">
				<swiper-item v-for="(item,index) in swiperItems" :key="index"
					@click="$utils.previewImgs(swiperItems,index)">
					<u-image :src="item.img_url" width="100%" height="100%"></u-image>
				</swiper-item>
			</swiper>

			<view class="fight-group" v-if="product.is_activity == 3">
				<view class="fight-group__left">
					<view>¥<text class="u-font-xl">{{ product.zs_shop_price }}</text></view>



				</view>
				<view class="fight-group__middle">
					<view class="fight-group__middle--top">拼团优惠价</view>
					<view class="fight-group__middle--bottom">¥{{ datainfo.goodsinfo.zs_market_price }}</view>
				</view>
				<view v-if="activity_info.assem_type == 1 && activity_info.zhuangtai == 0" class="fight-group__right"
					style="color: #fff;">{{ activity_info.pin_num }}人团</view>
				<uni-countdown
					v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
					:day="activity_time.day" :hour="activity_time.hour" :minute="activity_time.minute"
					:second="activity_time.second" :show-day="activity_time.day" splitor-color="#fff"
					background-color="#FF8300" border-color="#FF8300" color="#fff">
				</uni-countdown>
			</view>

			<view class="topPricePanel">
				<view v-if="product.is_activity != 3" class="u-p-l-30 u-p-r-30 u-p-t-20 ">
					<p class="u-flex u-col-center">
						<span class="originPrice"><span style="font-size:20upx">¥</span>
							{{product.zs_shop_price}}</span>
						<del class="shopPrice">{{'原价'+product.zs_market_price}}</del>
					</p>

					<p class="currency">{{ product.zs_market_price | currency}} </p>

				</view>

				<view class="productNameWrap ">
					<p class="u-font-xl u-line-2  "> {{product.goods_name}}</p>
					<u-tag text="自营" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.leixing == 1" />
					<u-tag text="限时秒杀" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.is_activity == 1"/>
					<u-tag text="团购" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.is_activity == 2" />
					<view class="fight-group__right"
						v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
						style="color: #FF5959;">{{ activity_info.pin_num }}人团</view>

				</view>

			</view>


			<view class="grace-time-press" v-if="product.is_activity == 1|| product.is_activity == 2">
				<view class="datatime-left">距离结束
					<uni-countdown @timeuptime="timeuptime" color="#FFFFFF" background-color="#FF6262"
						border-color="#FF6262" :day="activity_time.day" :hour="activity_time.hour"
						:minute="activity_time.minute" :second="activity_time.second" :show-day="activity_time.day"
						:show-colon="false">
					</uni-countdown>
				</view>
				<view class="progress-right">
					<view class="active-pro" :style="'width:' + activity_info.yslv?activity_info.yslv: 0"></view>
					已售数量{{activity_info.yslv?activity_info.yslv: 0}}
				</view>
			</view>

			<view class="order-shop bgCircle">
				<view class="order_list">
					<view class="juan">
						<text>发货:</text>
						<text class="color" style="padding-left:20upx;">
							{{product.freight}}
						</text>
					</view>

					<i class="iconfont order_color" style="font-size:26upx!important;">销量: {{product.sale_number}}</i>

				</view>
				<view class="order_list" @click="coupon(1)" v-if="couponinfos.is_show === 1">
					<view class="juan">
						<text>领券</text>
						<text class="color" style="padding-left:20upx;" v-for="(coupon,coukey) in couponinfos.infos "
							:key="coukey">
							满{{coupon.man_price}}减{{coupon.dec_price}}
						</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<view class="order_list" @click="coupon(2)" v-if="huodong.is_show === 1">
					<view class="juan">
						<text>活动商品</text>
						<text style="padding-left:20upx;flex:1">{{huodong.infos}}</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<view class="order_list" @click="coupon(3)" v-if="sertions.is_show === 1">
					<view class="juan">
						<text>服务</text>
						<text style="padding-left:20upx" v-for="(sertionsItem,sertionsKey) in sertions.infos"
							:key="sertionsKey">{{sertionsItem.ser_name}}</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<view class="order_list" @click="buyNow('guige')" v-if="radioattr.length">
					<view class="juan">
						<text>选择</text>
						<text style="padding-left:20upx;flex:1">{{guige}}</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<view class="checkimg" v-if="colores.length" @click="buyNow('guige')">
					<image :src="imgitem" v-for="(imgitem,index9) in colores" :key="index9" v-if="imgitem" />
					<text class="text"> 共{{datainfo.colores.length}}种颜色可选 </text>
				</view>

				<view class="order_list" @click="coupon(4)" v-if="datainfo.uniattr.length">
					<view class="juan">
						<text>参数</text>
						<text
							style="padding-left:20upx">{{ datainfo.uniattr[0] ? datainfo.uniattr[0].attr_name  : ''}}...</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<popup-layer ref="popupRef" :direction="'top'" @on-close="closePopup">
					<view class="popup-coupon" v-show="PopupIndex==1">
						<view class="popup-title">优惠券</view>
						<view class="coupon-list">
							<view class="items" v-for="(conList,conKey) in getcouponlst" :key="conKey">
								<view class="coupon-left">
									<view>￥ <text>{{conList.dec_price}}</text>优惠券</view>
									<text>满{{conList.man_price}}使用</text>
									<text>有限期:{{conList.start_time}}-{{conList.end_time}}</text>
								</view>
								<view class="coupon-right">
									<text @click="Receive(conList.id)" v-if="conList.have == 0">立即领取</text>
									<text style="background:#999" v-if="conList.have == 1">已领取</text>
								</view>
							</view>

						</view>

						<view class="popup-com">
							<button @click="hidePopup">确定</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==2">
						<view class="popup-title">促销</view>
						<view class="coupon-list"
							@click="getnav(`/pagesC/homeSon/huodongDate?shop_id=${product.shop_id}&prom_id=${huodong.prom_id}&goods_id=${goodsId}`)">
							<view class="cuxiao">
								<text class="title">促销</text>
								<view class="content">
									<view style="font-size:22upx">{{huodonginfo.promotion_name}}</view>
									<view style="color:#999;margin-top:10upx;">{{huodonginfo.time}}</view>
								</view>
								<i class="iconfont icon_e60c"></i>
							</view>
						</view>

						<view class="popup-com">
							<button @click="hidePopup">确定</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==3">
						<view class="popup-title">基础保障</view>
						<view class="coupon-list">
							<view class="guarantee" v-for="(serlstList,serlstKey) in serlst" :key="serlstKey">
								<image />
								<view class="guar-cont">
									<view>{{serlstList.ser_name}}</view>
									<view style="color:#999;margin-top:10upx;">{{serlstList.ser_remark}}</view>
								</view>
							</view>

						</view>

						<view class="popup-com">
							<button @click="hidePopup">确定</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==4">
						<view class="popup-title">产品参数</view>
						<view class="coupon-list uniattr">
							<view class="items" v-for="(datainfoitems, index6) in datainfo.uniattr" :key="index6">
								<text>{{datainfoitems.attr_name}}</text>
								<text>{{datainfoitems.attr_value}}</text>
							</view>

						</view>

						<view class="popup-com">
							<button @click="hidePopup">确定</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==5">
						<view class="grace-product-attr">
							<form @submit="attrSubmit" class="grace-form">
								<!-- 关闭按钮  -->
								<view class="grace-product-attr-close" @click="closeAttr">
									<text class="grace-iconfont icon-close2"></text>
								</view>
								<!-- 头部商品信息 -->
								<view class="grace-product-attr-info" style="height:240upx;">
									<image :src="product.thumb_url" style="width:200upx;height:200upx"></image>
									<view class="title">
										<div style="color:#FF1212;font-size:40upx;dispaly:inline-block;margin: 0;padding: 0"
											v-if="product.is_activity === 3">{{ getPrice }}<span class="tag-name"
												v-if="isPT == 2 || isPT == ''">拼团</span></div>
										<div style="color:#FF1212;font-size:40upx" :data-isPt="isPT"
											v-if="product.is_activity != 3">
											￥{{ product.zs_shop_price }}
											<text class="activity_info tag-name"
												v-if="product.is_activity == 1" style="width: 124rpx;">限时秒杀</text>
											<text class="activity_info" v-if="product.is_activity == 2">团购</text>
										</div>
										<p class="currency">{{ product.zs_shop_price | currency}}</p>
										<div style="font-size:24rpx;line-height:60rpx;">库存 : {{proNumber}}件</div>
										<view> 选择{{guige}} </view>
									</view>
								</view>
								<!-- 属性列表区 -->
								<view style="height:calc(100% - 250px); overflow-y:auto;">
									<view class="grace-product-attr-list" v-for="(tiems,keysin) in radioattr"
										:key="keysin">
										<view class="title">{{tiems[0]? tiems[0].attr_name : ''}}</view>
										<view class="grace-select-tips">
											<view name="type" class="select">
												<view class="select-items" @click="typeChange(item.id,keysin)"
													v-for="(item, index3)  in tiems" :key="index3"
													:class="[item.check === 'true' ? 'grace-checked-color' : '']">
													<image v-if="item.attr_pic" class="img" :src="item.attr_pic" />
													{{item.attr_value}}
												</view>
											</view>
										</view>
									</view>
									<view class="grace-items" style="margin-top:8px;">
										<view class="grace-label">购买数量</view>
										<!-- input 用于记录购买数量隐藏形式并参与表单提交 -->
										<!-- <input type="number" name="buynum" :value="buyNum" style="display:none;" /> -->
										<!-- <graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox> -->
										<uni-number-box v-if="product.is_activity === 1" :value="buyNum" :min="1"
											:max=" activity_info == '' ? 10000: activity_info.xznum"
											v-on:change="buyNumChange"></uni-number-box>
										<uni-number-box v-else :value="buyNum" :min="1" :max="1000000"
											v-on:change="buyNumChange"></uni-number-box>
									</view>
								</view>
								<view class="pt-tip" v-if="isPT == 2 && product.is_activity != 3">
									抱歉所选商品规格不能发起拼团，仅支持单独购买
								</view>
								<view class="grace-product-attr-btn" v-if="isPT == '' && product.is_activity != 3">
									<u-button shape="circle" type="warning" @click="submitOrder(false, 1)">确定</u-button>
								</view>
								<view class="grace-product-attr-btn flex" v-if="isPT == '' && product.is_activity == 3">
									<button type="warn" class="flex1" style="margin-right: 20upx;"
										@click="submitOrder(false, 1)">单独购买</button>
									<button type="warn" class="right-htn flex1"
										@click="submitOrder(false, 2)">{{ getBtnText }}</button>
								</view>
								<view class="grace-product-attr-btn" v-if="isPT == 1">
									<button type="warn" @click="submitOrder(false, 1)">单独购买</button>
								</view>
								<view v-if="isPT == 2 && product.is_activity != 3"></view>
								<view class="grace-product-attr-btn flex" v-if="isPT == 2">
									<button type="warn" class="flex1" v-if="product.is_activity == 3"
										@click="submitOrder(false, 2)">{{ getBtnText }}</button>

									<button type="warn" @click="submitOrder(true)" class="flex1"
										v-if="product.is_activity != 3">加入购物车</button>
									<button type="warn" class="flex1 right-htn" @click="submitOrder(false, 1)"
										v-if="product.is_activity != 3" style="margin-left: 20upx;">立即购买</button>

								</view>
							</form>
						</view>
					</view>
				</popup-layer>

			</view>

			<view class="fight-group__step" style="height: auto" v-if="product.is_activity == 3">
				<view class="fight-group__step--header" @click="getnav('/pagesC/homeSon/fightGroupRule')">
					<view class="middle">立即参加Ta人的已开团，可快速成团</view>
					<i class="iconfont icon_e60c"></i>
				</view>
				<view class="fight-group__list" v-for="(item, index) in userList" :key="index">

					<u-avatar :src="item.headimgurl" size="mini"></u-avatar>
					<view class="fight-group__list--middle">
						<h2>{{ item.user_name }}</h2>
						<span>还差{{ item.pin_num - item.tuan_num }}人</span>
						<u-count-down class="u-m-l-20" :timestamp="returnRemainTimeout(item.timeout)" font-size="28"
							color="#606266" :show-days="false"> </u-count-down>后结束
					</view>
					<view class="fight-group__list--item" @click="assembleActivityStatus(item.id)">拼团</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="fight-group__step" v-if="product.is_activity == 3">
				<view class="fight-group__step--header" @click="getnav('/pagesC/homeSon/fightGroupRule')">
					<text>拼团</text>
					<view class="middle">查看拼团规则</view>
					<i class="iconfont icon_e60c"></i>
				</view>
				<view class="fight-group__step--middle">
					<image :class="[item.pin_type == 1 ? 'user-active' : '']" :src="item.headimgurl"
						v-for="(item, index) in avatarList.imgs" :key="index"></image>
					<view>{{ avatarList.title }}</view>
				</view>
				<view class="fight-group__step--list">
					<view class="fight-group__step--item step-item__active">
						<image src="../../static/images/img/fight-group.png" />
						<text>发起拼团</text>
					</view>
					<view class="fight-group__step--item"
						:class="[activity_info.zhuangtai > 0 ? 'step-item__active' : '']">
						<image
							:src="activity_info.zhuangtai > 0 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
						<text>邀请好友参团</text>
					</view>
					<view class="fight-group__step--item"
						:class="[activity_info.zhuangtai == 2 ? 'step-item__active' : '']">
						<image
							:src="activity_info.zhuangtai == 2 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
						<text>拼团成功</text>
					</view>
				</view>
			</view>



			<!-- 进店 -->
			<view class="enterShop">
				<!-- <i class="iconfont icon_e678"></i> -->
				<view class="entershop-wrap">

					<u-avatar class="u-m-r-15" size="large" :src="shopinfos.logo" show-level></u-avatar>
					<view class="entershop-middle u-m-l-20">
						<view class="u-font-lg u-m-b-10">{{shopinfos.shop_name}}</view>
						<text class="u-font-sm" :style="{color:$u.color['tipsColor']}">{{shopinfos.shop_desc}}</text>
					</view>
				</view>
				<view class="u-flex u-row-between u-m-10">
					<p class=" u-font-sm" :style="{color:$u.color['tipsColor']}">商品评分: &nbsp;&nbsp;
						{{shopinfos.goods_fen ? shopinfos.goods_fen : '4.8'}}</p>
					<p class=" u-font-sm" :style="{color:$u.color['tipsColor']}">服务评分: &nbsp;&nbsp;
						{{shopinfos.fw_fen ? shopinfos.fw_fen: '4.2'}}</p>
					<p class=" u-font-sm" :style="{color:$u.color['tipsColor']}">物流评分: &nbsp;&nbsp;
						{{shopinfos.wuliu_fen? shopinfos.wuliu_fen: '4.9'}}</p>
				</view>
				<div class="u-flex u-m-t-25">

					<u-tag text="进店逛逛" shape="circle" class="u-m-r-30" mode="light" type="warning"
						@tap="$u.route({url:'/pagesC/home/personage/personage',params:{userId:shopinfos.id}})" />

				</div>

			</view>

			<!-- 店铺推荐 -->
			<view class="shop_recom" v-if="remgoodres.length > 0">
				<view class="title">
					<text>店铺推荐</text>
					<view @click="getnav('/pagesC/homeSon/storeDetails?shop_id='+ shopinfos.id)">查看全部<i
							class="iconfont icon_e60c order_color"></i></view>
				</view>
				<view class="contlist">
					<view class="itemshop" @click="getnav('/pagesC/homeSon/goodsDetails?id='+items.id)"
						v-for="(items,index9) in remgoodres" :key="index9">
						<image mode="aspectFill" :src="items.thumb_url" />
						<view>{{items.goods_name}}</view>
						<view class="color">￥ {{items.zs_price}}</view>
					</view>

				</view>

			</view>
			<u-subsection class="u-m-t-15" :list="[{name:'商品详情'},{name:'商品评价'}]" active-color="#ff9900" @change="showInfo" :current="currentIndex"></u-subsection>
			
			<!-- 详情 -->
			<view class="grace-product-info" v-if="currentIndex == 0">

					<rich-text :nodes="product.goods_desc"></rich-text>
					
			</view>
			<!-- 评论 -->
			<view class="grace-product-info" v-else="currentIndex == 1">
				<block v-for="item in GoodsCommentList" :key="item.id">
					<div class="commetItem">
						<div class="head ">
							<div class=" leftWrap">
								<image class="avatar" :src="item.thumb_url" mode="widthFix"> </image>
								<div>
									<p>{{item.user_name?item.user_name:'匿名'}}</p>
									<u-rate :value="item.goods_star" active-color="#ffa468" disabled></u-rate>
								</div>

							</div>
							<span class="time">{{item.createtime.slice(0,10) }}</span>
						</div>

						<div class="star">

						</div>
						<p class="content">{{item.content}}</p>
						<div class="imgWrap">
							<block v-for="(img, index2) in item.imgurl" :key="index2">
								<u-image :src="img" mode="widthFix" @click="$utils.previewImgs(item.imgurl,index2)"
									width="240" height="240" border-radius="8"> </u-image>
							</block>
						</div>
					</div>
				</block>

				<u-empty text="暂无评论" :src="getNocommentSrc" icon-size="280" v-if="GoodsCommentList.length===0">
				</u-empty>
			</view>
			<view style="height:60px;"></view>
			<!-- 底部 -->
			<view class="u-flex u-row-between footerWrap u-p-15">
				<view style="width:25%;" class="u-flex u-row-between u-p-l-15 u-p-r-15">

				<!-- 	<u-icon @click="chat" name="server-fill" color="#333" size="40" label="客服" label-pos="bottom"
						label-size="24"></u-icon> -->
					<u-icon @click="getnav('/pagesC/home/personage/personage?userId='+ shopinfos.id)" name="bookmark"
						color="#333" size="40" label="店铺" label-pos="bottom" label-size="24"></u-icon>
					<u-icon @click="getnav('/pages/tabBar/carted')" name="shopping-cart" color="#333" size="40"
						label="购物车" label-pos="bottom" label-size="24"></u-icon>
				</view>
				<!--          正常显示 没有活动-->
				<div class="u-flex " v-if="product.is_activity != 3">
					<view class="productBuyBtn leftBtn" @click="buyNow(true, '')">加入购物车</view>
					<view class="productBuyBtn rightBtn" @click="buyNow(false, '')">立即购买</view>
				</div>
				<!--  有活动-->
				<view class="u-flex" v-if="product.is_activity == 3">

					<view class="singleBuyBtn" @click="buyNow(false, 1)">
						<view class="u-font-bold">单独购买</view>
						<text>¥{{ activity_info.dandu_price }}</text>
					</view>
					<view class="teamBuyBtn" :class="[getBtnText === '邀请好友' ? 'right-htn__active' : '' ]"
						@click="buyNow(false, 2)">
						<view class="u-font-bold">{{ getBtnText }}</view>
						<text v-if="getBtnText != '邀请好友'">¥{{ product.zs_shop_price }}</text>
					</view>
				</view>

			</view>

		</view>
		<canvas canvas-id="myCanvas" id="myCanvas" v-if="false"></canvas>

		<view class="rightMenu" v-if="isMPWixin">
			<button class="weshareBtn" open-type="share">
				<u-icon class="rightMenuicon" name="weixin-fill" color="#3BB133" size="48"></u-icon>
			</button>
		</view>
		<view class="skeleton" v-if="skeleton == 'show'">
			<image :src="imgSTATICURL+'images/skeleton-img.png'"></image>
		</view>

		<u-popup v-model="isJoinBuyTeam" v-if="joinAGroup.tz" mode="center" border-radius="14" width="80%"
			:closeable="true">
			<view class="buyTeamWrap">
				<p class="title">参与 {{joinAGroup.tz.user_name}}的拼单</p>
				<p class="remainder">仅剩{{joinAGroup.pin_num-joinAGroup.tuan_num}}个名额，
					<u-count-down :timestamp="returnRemainTimeout(joinAGroup.timeout)" :show-border="true"
						font-size="28" color="#606266" border-color="transparent"></u-count-down>后结束
				</p>
				<u-avatar :src="joinAGroup.tz.headimgurl"></u-avatar>
				<u-button type="error" style="margin-top:20upx" @click="join(joinAGroup.id)"> 拼团 </u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uniNumberBox from '../../components/uni-number-box.vue'
	import uniCountdown from "../../components/uni-countdown.vue";

	let pinid, canvasImg = '';
	let shopId = null // 商品 id
	let arr = []
	let buyNowNum = ''
	//记录用户选择的属性
	let strRadio = []
	var dateObj = new Date();

	export default {

		data() {
			return {
				imgSTATICURL: '',
				heightImg: '330px',
				datainfo: {
					uniattr: []
				},
				isJoinBuyTeam: false,
				swiperItems: [], // 轮播图
				product: '', // 商品详情
				shopinfos: '', // 商家店铺
				guige: '',
				couponinfos: '', // 商品优惠券
				remgoodres: '', // 商家推荐商品
				huodong: '', // 活动
				sertions: '', // 服务
				radioattr: [], // 商品属性
				getcouponlst: [], //优惠券列表
				huodonginfo: '', // 活动促销列表
				serlst: [], // 商品服务列表
				goodsId: null, // 商品 id
				colores: [], // 商品颜色
				activity_info: '', // 限时秒杀
				active: 1,
				proNumber: 0, //  获取库存信息
				buyNum: 1,
				activity_time: {}, // 秒杀时间
				pin_id: '',
				tuan_id: '',
				PopupIndex: 0,
				userList: [],
				userCartNum: 0,
				choosePinNum: '',
				isPT: '',
				isJoin: false,
				skeleton: 'show',
				isMPWixin: false,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				GoodsCommentList: [],
				currentIndex: 0,
				tmeImg: '',
				swiperIndex: 0,
				joinAGroup: {},
				useid:''
			};
		},

		async onLoad(option) {
			this.useid = option.useid
			//#ifdef MP-WEIXIN
			this.isMPWixin = true;
			//#endif

			this.imgSTATICURL = this.STATICURL
			if (option) {
				pinid = option.pin_id || ''
				if (pinid) {
					this.assembleActivityStatus(pinid)
				}
				shopId = option.id
				this.goodsId = option.id
				this.userCartNum = this.$store.state.userCartNum
				await this.getgoodsinfoList()
				this.getGoodsCommentList()
				strRadio = []
			}
		},
		computed: {

			getNocommentSrc() {

				return this.STATICURL + 'images/nullStatus/icon-comments.png'
			},
			avatarList() {
				if (this.activity_info.assem_type == 1) {
					if (this.activity_info.zhuangtai === 2) {
						return {
							imgs: this.activity_info.member_assem,
							title: '拼团成功'
						}
					}

					return {
						imgs: this.activity_info.member_assem,
						title: '开团后邀请好友组团'
					}
				}

				if (this.activity_info.assem_type == 2) {
					return {
						imgs: this.activity_info.member_assem,
						title: this.activity_info.member_assem[0].pin_type == 1 ?
							`欢迎来到${this.activity_info.member_assem[0].user_name}开的团` : '欢迎参团'
					}
				}

				if (this.activity_info.assem_type == 3) {
					return {
						imgs: this.activity_info.member_assem,
						title: '邀请好友参团'
					}
				}
			},
			getBtnText() {
				if (this.activity_info.assem_type == 1 && !this.isJoin) {
					return '发起拼团'
				}

				if (this.activity_info.assem_type == 2 || this.isJoin) {
					return '拼团'
				}

				if (this.activity_info.assem_type == 3 && !this.isJoin) {
					return '邀请好友参团'
				}
			},
			getPrice() {
				if (this.isPT == 2 || this.isPT == '') {
					return `￥${this.product.zs_shop_price}`
				}
				if (this.isPT == 1) {
					return `￥${this.activity_info.dandu_price}`
				}
			}
		},

		watch: {

		},

		async onShareAppMessage(res) {
			// await this.compositeImage()
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}

			return {
				title: this.product.goods_name,
				path: '/pagesC/homeSon/goodsDetails?id=' + shopId,
				imageUrl: this.product.thumb_url
			}

		},
		methods: {
			swiperChange(e) {
				this.swiperIndex = e
			},
			preview(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index,
					indicator: 'number'
				});
			},
			returnRemainTimeout(item) {
				console.log(item - new Date().getTime())
				return item - new Date().getTime() / 1000
			},
			assembleActivityStatus(id) {
				/**
				 * @function  assembleActivityStatus
				 * @param {string} pindan_id - 拼团id
				 * @return {isJoinBuyTeam} Object - 返回的拼团信息
				 */
				this.$http.assembleActivityStatus({
					pindan_id: id
				}).then(res => {
					this.joinAGroup = res.data
					if (res.status === 200) {
						this.isJoinBuyTeam = true
					} else {
						this.$refs.uToast.show({
							title: `${ this.joinAGroup.tz.user_name}发起的拼团已结束`,
							type: 'error',
							duration: 3500
						})
					}
				})
			},
			getNetworkImage() {
				let url = this.product.thumb_url
				console.log("-> url", url);
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: (e) => {
							const p = e.tempFilePath
							if (p.indexOf('json') > -1) {
								reject(p)
								return false
							}
							resolve(p)
						},
						fail: (r) => {
							reject(r)
						}
					})
				})
			},


			getGoodsCommentList() {
				const data = {
					goods_id: this.goodsId
				}
				this.$http.getGoodsCommentList(data).then(res => {
					if (res.status === 200) {
						this.GoodsCommentList = res.data.data
					}
				})
			},
			closePopup() {
				this.isJoin = false
			},
			join(num) {
				this.isJoinBuyTeam = false
				this.isJoin = true
				this.PopupIndex = 5
				this.isPT = 2
				this.choosePinNum = num
				this.$refs.popupRef.show()
			},
			hidePopup() {
				this.isJoin = false
				this.$refs.popupRef.close() // 关闭

			},
			// 1 优惠劵  2 活动 3 服务
			async coupon(index) {

				this.PopupIndex = index
				this.$refs.popupRef.show() // 弹出
				if (this.PopupIndex === 1) {
					this.$loading()
					this.$http.getcouponlst({
						shop_id: this.product.shop_id
					}).then(res => {
						if (res.status == 200) {
							this.getcouponlst = res.data
						}
					})
				}
				if (this.PopupIndex === 2) {
					this.$loading()
					this.$http.gethuodonginfo({
						shop_id: this.product.shop_id,
						goods_id: shopId,
						prom_id: this.huodong.prom_id
					}).then(res => {
						if (res.status == 200) {
							this.huodonginfo = res.data
						}
					})
				}
				if (this.PopupIndex === 3) {
					this.$loading()
					this.$http.getserlst({
						shop_id: this.product.shop_id,
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.serlst = res.data
						}
					})
				}

			},
			/**
			 * 立即领取优惠劵
			 */
			Receive(id) {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				} // 判断是否登录
				this.$loading()
				this.$http.getcoupons({
					coupon_id: id,
					shop_id: this.product.shop_id
				}).then(res => {
					if (res.status == 200) {
						this.$toast(res.mess)
						this.getcouponlst.forEach(element => {
							if (element.id == id) {
								element.have = 1
							}
						});
					}
				})
			},
			getgoodsinfoList() {
				this.$loading()
				this.$http.getgoodsinfo({
					goods_id: this.goodsId,

				}).then(res => {
					if (res.status == 200) {
						this.datainfo = res.data
						this.swiperItems = res.data.gpres
						this.product = res.data.goodsinfo
						this.shopinfos = res.data.shopinfos
						this.couponinfos = res.data.couponinfos
						this.huodong = res.data.huodong
						this.sertions = res.data.sertions
						this.radioattr = res.data.radioattr
						this.proNumber = res.data.pronum
						this.pin_id = res.data.pin_id
						this.tuan_id = res.data.tuan_id
						this.userList = res.data.memberpinres

						this.remgoodres = res.data.remgoodres
						this.guige = res.data.guige.join(',')
						if (res.data.activity_info.length != 0) {
							this.activity_info = res.data.activity_info
						}

						this.colores = res.data.colores.length > 5 ? res.data.colores.slice(0, 5) : res.data
							.colores
						if (res.data.activity_info.end_time) {
							let str = Number(this.activity_info.end_time) - Number(this.activity_info.dqtime)
							let strArr = this.$formatSeconds(str).split('-')
							this.activity_time = {
								day: parseInt(strArr[0] / 24),
								hour: parseInt(strArr[0] % 24),
								minute: parseInt(strArr[1]),
								second: parseInt(strArr[2])
							}

						} else {
							this.activity_time = ''
						}
						var str = ''
						if (res.data.goods_attr) {
							let checkAttr = res.data.goods_attr.split(',')
							strRadio = res.data.goods_attr.split(',')

							for (let keys of checkAttr) {
								this.radioattr = res.data.radioattr.map(item => {
									const item1 = item.map(i => {
										if (i.id == keys) {
											i.check = 'true'
											res.data.guige.forEach((j, index) => {
												if (j === i.attr_name) {
													var str1 = res.data.guige.length -
														1 === index ? '' : ','
													str = str + j + ':' + i.attr_value +
														str1
												}
											})
										}

										return i
									})

									return item1
								})
							}
						}
						this.radioattr = res.data.radioattr.map(item => {
							const item1 = item.map(i => {
								if (item.length === 1) {
									i.check = 'true'
									strRadio.push(i.id)
									this.guige = `${this.guige}:${i.attr_value}`
								}

								return i
							})

							return item1
						})
						/**
						 * 更新banner 高度
						 */
						setTimeout(() => {
							let view = uni.createSelectorQuery().select(".image_height");
							view.fields({
								size: true,
								scrollOffset: true
							}, data => {
								console.log(data);
								if (data && data.height > 330) {
									this.heightImg = data.height + 'px'
								}
								// console.log("节点的宽为" + data.width);

							}).exec();
						}, 200)
						/**
						 * 更新页面状态 防止页面卡死
						 */
						setTimeout(() => {
							this.skeleton = 'hide'
						}, 200)
						this.statusMath(this)
					}
					if (res.status == 400) {
						console.log(res)
					}

				})
				
			},

			showInfo(index) {
				console.log(index)
				this.currentIndex = index
			},

			buyNow: function(type, status) {
				if (this.getBtnText === '邀请好友' && type !== 'guige' && status === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)

					return false
				}

				if (type === 'guige' && this.product.is_activity == 3) return
				// if (this.datainfo.goodsinfo.is_activity === 3) return
				this.PopupIndex = 5
				this.isPT = status
				this.$refs.popupRef.show() // 弹出
				buyNowNum = type // true加入购物车，  false直接购买b

			},
			submitOrder(status, type) {
				if (this.getBtnText === '邀请好友' && type !== 'guige' && type === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)

					return false
				}
				if (buyNowNum) {
					this.attrSubmit(type)
				} else {
					buyNowNum = status
					this.attrSubmit(type)
				}
				this.$refs.popupRef.close() // 弹出
			},
			// 确认属性
			attrSubmit: function(type) {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				} // 判断是否登录
				//后续操作
				let data = {}
				if (this.getBtnText === '立即参团') {
					data = {
						goods_id: shopId,
						goods_attr: strRadio.join(','),
						num: this.buyNum,
						fangshi: 2,
						pin_number: this.choosePinNum
					}
				} else {
					data = {
						goods_id: shopId,
						goods_attr: strRadio.join(','),
						num: this.buyNum,
						fangshi: type
					}
				}
				this.$loading()
				if (buyNowNum) {
					this.$http.getaddcart(data).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							//关闭
							this.$store.dispatch('contentnum')
							this.$refs.popupRef.close() // 关闭

							setTimeout(() => {
								this.userCartNum = this.$store.state.userCartNum
							}, 800)
						}
					})
				} else {
					this.$http.getpurbuy(data).then(res => {
						if (res.status == 200) {
							this.getnav(
								`/pagesC/homeSon/ConfirmationOrder?pur_id=${res.data.pur_id}&type=1&fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}`
								)
						}else{
							uni.showToast({
								title: res.mess,
								icon:'none'
							})
						}
					})

				}

			},
			closeAttr: function() {
				this.isJoin = false
				this.$refs.popupRef.close() // 关闭
			},

			typeChange: function(checkVal, key) {
				let radioObaject = this.radioattr
				strRadio = []

				let guigearr = []
				for (let keys in radioObaject) {
					if (key == keys) {
						for (var i = 0; i < radioObaject[keys].length; i++) {
							if (radioObaject[keys][i].id == checkVal && radioObaject[keys][i].attr_pic) {
								this.$set(this.product, 'thumb_url', radioObaject[keys][i].attr_pic)
							}
							if (radioObaject[keys][i].id == checkVal) {
								radioObaject[keys][i].check = 'true'
								if (!guigearr.includes(radioObaject[keys][i].attr_name + ":" + radioObaject[keys][i]
										.attr_value)) {
									guigearr.push(radioObaject[keys][i].attr_name + ":" + radioObaject[keys][i]
										.attr_value)
								}
							} else {
								radioObaject[keys][i].check = 'false'
							}
						}
					}
				}

				for (let keys2 in radioObaject) {
					for (var i = 0; i < radioObaject[keys2].length; i++) {
						if (radioObaject[keys2][i].check == 'true') {

							strRadio.push(`${radioObaject[keys2][i].id}`)

							if (!guigearr.includes(radioObaject[keys2][i].attr_name + ":" + radioObaject[keys2][i]
									.attr_value)) {
								guigearr.push(radioObaject[keys2][i].attr_name + ":" + radioObaject[keys2][i]
									.attr_value)
							}
						}
					}
				}

				if (Object.keys(radioObaject).length == strRadio.length) {
					const apiName = this.isPT == 1 || (this.isPT == 2 && this.product.is_activity === 3) || (this
						.isPT == '' && this.product.is_activity === 3) ? 'getpingoodsPrice' : 'getgoodsPrice'
					this.$http[apiName]({
						goods_attr: strRadio.join(','),
						goods_id: shopId,
						fangshi: this.isPT != 1 && this.product.is_activity == 3 ? 2 : 1
					}).then(res => {
						if (res.status == 200) {
							this.proNumber = res.data.attrinfos.goods_number
							this.pin_id = res.data.pin_id
							this.tuan_id = res.data.tuan_id
							this.guige = guigearr.join(',')
							this.isJoin = false
							this.userList = res.data.memberpinres
							if (res.data.activity_info.length != 0) {
								this.activity_info = res.data.activity_info
							}
							this.buyNum = 1
							if ((res.data.fangshi != 1 && this.isPT != 1) || !this.isPT || this.isPT == 2 &&
								res.data.fangshi == 1) {
								this.product.is_activity = res.data.attrinfos.is_activity
							}
							// this.$set
							this.product.goods_name = res.data.attrinfos.goods_name
							this.product.zs_shop_price = res.data.attrinfos.zs_shop_price
							this.product.thumb_url = res.data.attrinfos.attr_pic ? res.data.attrinfos
								.attr_pic : this.product.thumb_url

							if (res.data.activity_info.end_time) {
								let str = Number(this.activity_info.end_time) - Number(this.activity_info
									.dqtime)
								let strArr = this.$formatSeconds(str).split('-')

								this.activity_time = {
									day: parseInt(strArr[0] / 24),
									hour: strArr[0] % 24,
									minute: strArr[1],
									second: strArr[2]
								}

							} else {
								this.activity_time = ''
							}
						}
					})
				}
				// this.radioattr = this.radioattr;
			},
			buyNumChange: function(data, id) {
				// console.log(data,id)
				this.buyNum = data;
			},
			// 领取优惠券
			securities: function() {
				uni.navigateTo({
					url: '/pages/subPage/Coupon'
				})
			},
			timeuptime() {
				// 倒计时$t('Confirm')或执行
				this.$toast('秒杀结束')
				this.getgoodsinfoList()
				strRadio = []
			},
			getTab(src) {
				uni.switchTab({
					url: src
				});
			},
			getIsLogin() {
				if (!uni.getStorageSync('token')) {
					uni.redirectTo({
						url: '/pagesB/login/login'
					});
					return false
				}
				return true
			},
			chat() {
				console.log(this.datainfo.goodsinfo,"5555555555555555")
				if (!uni.getStorageSync('token')) {
					this.getnav('/pagesB/login/login')

					return false
				}

				this.getnav(`/pages/businessSon/chat?toId=${this.datainfo.goodsinfo.shop_token}&userId=${this.useid}` )
			},
			// 关注
			home() {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				}
				if (this.product.coll_goods == 1) {
					// 取消关注
					this.$loading()
					this.$http.getcancelcoll({
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							this.product.coll_goods = 0
						}
					})
				} else {
					this.$loading()
					this.$http.getcoll({
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							this.product.coll_goods = 1
						}
					})
				}
			},

		},
		components: {
			uniNumberBox,
			uniCountdown
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 740upx;
	}

	%Card {
		border-radius: 16upx;
		margin: 20upx;
		background-color: #fff;
		padding: 10upx 20upx;
	}

	.topPricePanel {
		@extend %Card;
		$color: #FE5000;

		.shopPrice {
			// background-color: $color;
			color: #666;
			padding: 2upx 12upx;
			border-radius: 200upx;
			margin-left: 20upx;
		}

		.originPrice {
			font-size: 40upx;
			color: $color;
		}
	}

	.pt-tip {
		display: block;
		line-height: 60upx;
		text-align: center;
		padding: 0 0.1rem;
		color: #fff;
		background: #000;
	}

	.select {
		display: flex;
		align-items: center;

	}

	.select-items {
		display: flex;
		flex-shrink: 0;
		padding: 4upx 16upx;
		background-color: #f4f4f4;
		align-items: center;
		margin-right: 15upx;
		border-radius: 10upx;
		border: 1upx solid #f4f4f4;

		.img {
			height: 40upx;
			width: 40upx;
			margin-right: 5upx;
			padding: 5upx;

		}
	}

	.grace-product-attr-info {
		.title {
			text {
				font-size: 26upx;
			}
		}
	}

	.index_class .grace-footer_fightgroup .right-htn__active {
		line-height: 90upx !important;
	}

	.grace-product-attr {
		height: 80vh !important;
		position: absolute !important;
	}

	.grace-mask {
		position: relative !important;
	}

	.uni-countdown__splitor {
		color: #000;
	}

	.skeleton {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.enterShop {
		@extend %Card;
	}

	.entershop-wrap {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.entershop-wrap>image {
		border-radius: 50%;
		margin-right: 10upx;
	}

	.entershop-wrap .entershop-middle {
		flex: 1;
	}

	// 拼团
	.fight-group {
		display: flex;
		align-items: center;
		padding: 16upx 24upx;
		height: 87upx;
		background: #f90cb4;
		color: #fff;
		font-size: 28upx;
	}

	.fight-group__left {
		margin-right: 20upx;
		font-size: 30upx;

		i {
			font-size: 46upx;
		}
	}

	.fight-group__middle {
		flex: 1;

		.fight-group__middle--top {
			margin-bottom: 6upx;
			font-size: 24upx;
		}

		.fight-group__middle--bottom {
			display: inline-block;
			height: 34upx;
			line-height: 34upx;
			text-decoration: line-through;
			color: rgba(255, 255, 255, 0.7)
		}
	}

	.fight-group__step {
		height: 522upx;
		margin-top: 20upx;
		padding: 32upx 0 50upx 0;
		background: #fff;
		@extend %Card;
	}

	.fight-group__step--header {
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
		padding: 0 24upx;
		color: #999;
		font-size: 26upx;

		.middle {
			flex: 1;
			padding-left: 36upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.fight-group__step--middle {
		margin-bottom: 69upx;
		color: #999999;
		font-size: 28upx;
		text-align: center;

		image {
			position: relative;
			width: 104upx;
			height: 104upx;
			margin-bottom: 24upx;
			border-radius: 50%;
		}

		.user-active:after {
			display: block;
			position: absolute;
			bottom: 0upx;
			left: 50%;
			transform: translateX(-50%);
			content: '团长';
			color: #fff;
			padding: 4upx 2upx;
			text-align: center;
			background: #FA3F3F;
			font-size: 22upx;
		}
	}

	.fight-group__step--list {
		display: flex;

		.step-item__active {
			color: #FA3F3F !important;
		}

		.fight-group__step--item {
			flex: 1;
			color: #999999;
			font-size: 24upx;
			text-align: center;

			&:last-child image::after {
				display: none;
			}

			image {
				position: relative;
				z-index: 1;
				width: 40upx;
				height: 40upx;
				overflow: inherit !important;
				margin-bottom: 24upx;

				&::after {
					position: absolute;
					left: 40upx;
					top: 50%;
					width: 239upx;
					height: 2upx;
					background: #E8E8E8;
					content: '';
					transform: translateY(-50%);
				}
			}

			text {
				display: block;
			}
		}
	}

	.singleBuyBtn {
		background-color: #6e05e5;
		color: #fff;
		border-radius: 8upx;
		padding: 8upx 38upx;
		text-align: center;
	}

	.teamBuyBtn {
		@extend .singleBuyBtn;
		background-color: #f809b4;
	}


	.tag-name {
		display: inline-block;
		font-size: 22upx;
		border: 1upx solid #FA3F3F;
		width: 59upx;
		height: 29upx;
		line-height: 29upx;
		margin-left: 10upx;
		text-align: center;
		border-radius: 4upx;
		color: #FA3F3F !important;
	}

	.fight-group__list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;

		.fight-group__list--middle {
			flex: 1;
			padding: 0 10 0 20upx;
			color: #999;
			font-size: 24upx;
			margin-left: 20upx;

			h2 {
				margin-bottom: 10upx;
				font-size: 30upx;
				color: #444;
				font-weight: 600;
			}
		}

		image {
			width: 88upx;
			height: 88upx;
			margin-right: 20upx;
			border-radius: 50%;
		}

		.fight-group__list--item {
			font-size: 24upx;
			color: #fff;
			padding: 10upx 20upx;
			display: inline-block;
			text-align: center;
			border-radius: 80upx;
			background: #ef27b4;
		}
	}

	.commetItem {
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		border-bottom: 1px solid #f5f5f5;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftWrap {
				display: flex;
				align-items: center;
			}

			.time {
				font-size: 24upx;
				color: #666;
			}

			.avatar {
				display: flex;
				align-items: center;
				width: 60upx;
				border-radius: 200px;
				margin-right: 20upx;
			}
		}

		.star {
			font-size: 36upx;
			font-weight: 800;
			color: #ff7f2b;
			margin-left: 15upx;
			line-height: 1;
			margin-top: 10upx;
		}

		.content {
			padding: 10upx;
		}

		.imgWrap {
			display: flex;
			flex-wrap: wrap;

			image {
				width: 24%;
				margin-left: 4upx;
				border-radius: 12upx;
			}
		}
	}

	.bgCircle {
		border-radius: 16upx;
		overflow: hidden;
		background-color: #fff;

	}

	.productNameWrap {
		padding: 12upx 0;
		@extend .bgCircle
	}

	.goodsPrice {
		font-size: 42upx;
		font-weight: 600;
	}

	.productBuyBtn {
		text-align: center;
		width: 180upx;
		padding: 20upx 0;
		background: #ffcc14;
		color: #fff;
		border-radius: 200px;

		&.leftBtn {
			background-color: #ffcc14;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&.rightBtn {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			background-image: linear-gradient(to right, #ff8864, #ff2121);
		}
	}

	.footerWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
	}

	.rightMenu {
		position: fixed;
		bottom: 140upx;
		right: 20upx;
		display: flex;
		flex-direction: column;

		.weshareBtn {
			width: 80upx;
			height: 80upx;
			background-color: transparent;
			padding: 0;
			margin-bottom: 20upx;

			&::after {
				border: none;
			}
		}

		&icon {
			width: 70upx;
			height: 70upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(#fff, 0.2);
			border: 2upx solid #dedede;
			border-radius: 200upx;
			margin-bottom: 20upx;
		}
	}


	.order-shop {

		@extend %Card;

		.order_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx;

			.juan {
				display: flex;

				text {

					font-size: 26upx;
					color: #333;

					&:nth-child(2),
					&:nth-child(3) {
						color: #333;
					}
				}

				.color {
					color: #f44336;
				}

			}

			.order_color {
				font-size: 26upx;
				color: #333;
			}
		}
	}

	.grace-time-press {
		@extend %Card;
		margin: 0 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.datatime-left {
			font-size: 24upx;
			color: #FF0036;
			display: flex;
			align-items: center;

			.grace-countdown {
				.grace-countdown-numbers {
					border: 0 !important;
					padding: 0 !important;
					margin: 0 !important;
				}
			}
		}

		.progress-right {
			position: relative;
			width: 230upx;
			height: 30upx;
			background: rgba(255, 67, 55, 0.2);
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 30upx;
			border-radius: 15upx;

			.active-pro {
				position: absolute;
				width: 0;
				height: 30upx;
				left: 0;
				top: 0;
				border-radius: 15upx;
				background-color: #ff3333;
				opaity: 0.5;
			}
		}
	}

	.buyTeamWrap {
		padding: 38upx;
		text-align: center;

		.title {
			font-size: 30upx;
		}

		.remainder {
			color: #666;
			margin: 14upx 0 28upx;
		}
	}
</style>
